<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix='c' uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
<script type="text/javascript" src="/${initParam.context_root}/script/script.js"></script>
<script type="text/javascript" src="/${initParam.context_root}/script/joinform_address.js"></script>
<script type="text/javascript">
function checkId() {
	var custId = $("#custId").val();
	if (custId.length < 6) {
		$("#idcheck_message").html("여섯글자이상 넣으세요").css("color","red");
		return;
	} 
	$.ajax({
		"url" : "/${initParam.context_root}/customer/checkId.do",
		type : "POST",
		data : {custId : custId},
		dataType : "JSON",
		success : function(JSON) {
			$("#idcheck_message").html("사용가능한 ID입니다.").css("color","blue");
			if(JSON.customer.custId){
				$("#idcheck_message").html("중복아이디입니다.").css("color","red");
			}
		}
	});
}
</script>
<style type="text/css">
#joinForm tr {
	height: 50px;
}
</style>
</head>

<form method="post" action="/${initParam.context_root }/customer/join.do" onsubmit="return formCheck(this);">
	<div style="float: center">
		<table align="center">
			<tr>
				<td>
					<table id="joinForm">
						<tr>
							<td width="100px"><label for="custId">ID</label></td>
							<td width="350px">
								<div class="col-lg-7"><input type="text" class="form-control" onkeyup="checkId();" id="custId" name="custId" placeholder="6글자이상"/></div> 
								<span id="idcheck_message"></span>
							</td>
						</tr>
						<tr>
							<td><label>PASSWORD</label></td>
							<td><div class="col-lg-7"><input type="password" class="form-control" id="password" name="password" placeholder="정확히 기입하세요"/></div></td>
						</tr>
						<tr>
							<td><label>NAME</label></td>
							<td><div class="col-lg-7"><input type="text" class="form-control" name="name" placeholder="이름을 입력하세요"/></div></td>
						</tr>
						<tr>
							<td><label>BIRTH</label></td>
							<td><div class="col-lg-7"><input type="text" id="birth" class="form-control" name="birth" placeholder="클릭하세요"/></div></td>
						</tr>
						<tr>
							<td><label>EMAIL</label></td>
							<td><div class="col-lg-9"><input type="email" class="form-control" name="email" placeholder="비밀번호찾기에 사용되는 이메일"/></div></td>
						</tr>
						<tr>
							<td><label>PHONE</label></td>
							<td>
								<div class="col-lg-7"><input type="text" class="form-control" name="phone" placeholder="'-' 제외하고 숫자만 기입하세요"/></div>
								<h5 style="color: blue">ex) 01012344478</h5>
							</td>
						</tr>
						<tr>
							<td><label>ADDRESS</label></td>
							<td><div class="col-lg-12"><input type="text" class="form-control" name="address" id="address" placeholder="클릭하시면 우편번호 찾기창이 나타납니다." onclick="openDaumPostcode();"/></div></td>
						</tr>
						<tr>
							<td><label>상세주소</label></td>
							<td><div class="col-lg-12"><input type="text" class="form-control" name="addr" id="addr" placeholder="나머지 주소를 입력하세요" /></div></td>
						</tr>
						<tr>
							<td colspan="3" align="right">
								<button type="submit" class="btn btn-info btn-sm" onclick="sum();">가입</button>
								<button type="reset" class="btn btn-info btn-sm"
									style="margin-right: 90px;">취소</button>
							</td>
						</tr>
					</table>
				</td>
				<td><img src="/${initParam.context_root }/img/join_logo.jpg" />
				</td>
			</tr>
		</table>
	</div>
</form>
